<template>
	<view>
		<scroll-view scroll-x="true" style="white-space: nowrap;" class=" bg-white">
			<view class="pb-20 pt-20 pl-40 pr-40 bg-white flex" style="position: sticky;top: 0;">
				<view class="mr-40 text-center flex flex-colum items-center" v-for="(item,index) in category" @click="setIndex(index)">
					<view :class="[selectIndex === index ? 'list-select' : '']" style="min-width: 68rpx;">{{item.title}}</view>
					<view class="list-bord mt-10" v-if="selectIndex === index"></view>
				</view>
			</view>
		</scroll-view>
		<view class="p-20">
			<view class="flex items-center p-30 bg-white border-radius2 mb-20" v-for="(item, index) in articleLists" :key="index" @click="$goRoute.goUrl('/pages/articles/details/details?id='+item.id)">
				<image v-if="item.cover" :src="item.cover" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				<image v-if="!item.cover" src="@/static/images/picture.png" mode="" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
				<view class="font-no-wrap2 ml-20 font-26" style="width: 70vw;">{{item.title}}</view>
			</view>
			<view class="text-center mt-100" v-if="articleLists.length ===0">暂无信息...</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '../../api/article';
import { getCategory } from '../../api/common';
	export default {
		data() {
			return {
				selectIndex: 0,
				user: null,
				pageNo: 1,
				pageSize: 10,
				articleLists: [],
				category: [],
				filter: {
					category: ''
				}
			}
		},
		onLoad(options) {
			this.getCategories()
			// this.getArticle()
		},
		onShow() {
			this.getUserType()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/articles/articles'
			}
		},
		onReachBottom() {
			
		},
		methods: {
			getCategories() {
				getCategory({
					pcode: 'article_category'
				}).then(res => {
					this.category = res.result
					this.filter.category = res.result[0].key
					this.getArticle()
				})
			},
			getArticle() {
				uni.showLoading({
					title: '加载中'
				})
				list({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					...this.filter
				}).then(res => {
					if (this.pageNo === 1) {
						this.articleLists = res.result.records
					} else {
						this.articleLists.push(...res.result.records)
					}
					this.pageNo += 1
					uni.hideLoading()
				})
			},
			getUserType() {
				const user = uni.getStorageSync('userInfo')
				if (user) {
					this.user = user
					if (user.type === 1) {
						uni.setTabBarItem({
						  index: 1,
						  text: '人才',
						  iconPath: 'static/images/t-2.png',
						  selectedIconPath: 'static/images/t-2-s.png'
						})
					}
				}
			},
			setIndex(index) {
				this.selectIndex = index
				this.filter.category = this.category[index].key
				this.pageNo = 1
				this.getArticle()
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F6F6;
	}
	.list-bord {
		background: linear-gradient(270deg, #75FFED 0%, #46B4B1 100%);
		width: 68rpx;
		height: 8rpx;
	}
</style>